<template>
  <div>
    <div style="width:100%">
      <h1 style="display: inline-block">个人中心</h1>
     
      <el-link  class="tuichu" @click="tuihuishouye"
        >退回首页</el-link
      > 
      <el-link  class="zhuxiao" @click="deleteUser"
        >注销</el-link
      >
    </div>

    <el-button class="xiugai" @click="update" type="primary">修改</el-button>
    <div class="kuankuan">
      <div style="margin-bottom: 20px">
        <span>姓名：{{ user.username }}</span>
      </div>
      <div style="margin-bottom: 20px">
        <span>昵称：{{ user.nickname }}</span>
      </div>
      <div style="margin-bottom: 20px">
        <span>密码：{{ user.pwd }}</span>
      </div>
      <div style="margin-bottom: 20px">
        <span>性别：{{ user.sex }}</span>
      </div>
      <div style="margin-bottom: 20px">
        <span>年龄：{{ user.age }}</span>
      </div>
      <div style="margin-bottom: 20px">
        <span>所在城市：{{ user.city }}</span>
      </div>
      <div style="margin-bottom: 20px">
        <span>电话：{{ user.tle }}</span>
      </div>
      <div style="margin-bottom: 20px">
        <span>爱好：{{ user.plike }}</span>
      </div>
      <div style="margin-bottom: 20px">
        <span>邮箱：{{ user.email }}</span>
      </div>
    </div>

    <!-- 修改框 -->
    <el-dialog title="修改信息" :visible.sync="dialogVisible" width="50%">
      <el-form ref="form" :model="userMessage" label-width="80px">
        <el-form-item label="姓名：">
          <el-input v-model="userMessage.username"></el-input>
        </el-form-item>
        <el-form-item label="昵称：">
          <el-input v-model="userMessage.nickname"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="userMessage.pwd"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-input v-model="userMessage.sex"></el-input>
        </el-form-item>
        <el-form-item label="年龄：">
          <el-input v-model="userMessage.age"></el-input>
        </el-form-item>
        <el-form-item label="所在城市：">
          <el-input v-model="userMessage.city"></el-input>
        </el-form-item>
        <el-form-item label="电话：">
          <el-input v-model="userMessage.tle"></el-input>
        </el-form-item>
        <el-form-item label="爱好：">
          <el-input v-model="userMessage.plike"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="userMessage.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "personalIndex",
  data() {
    return {
      user: {},
      dialogVisible: false,
      userMessage: {},
    };
  },
  created() {
    this.selectByName();
  },
  methods: {
    selectByName() {
      let content = {
        id: JSON.parse(localStorage.getItem("login_user")).id,
      };
      let url = "/user/selectByName";
      let param = this.$qs.stringify(content);
      this.$axios
        .post(url, param)
        .then((resp) => {
          this.user = resp.data;
        })
        .catch((err) => {
          console.log("error=", err);
        });
    },
    update() {
      this.dialogVisible = true;
      this.userMessage = this.user;
    },
    onSubmit() {
      let url = "/user/update";
      this.user.act = "update";
      let param = this.$qs.stringify(this.userMessage);
      this.$axios
        .post(url, param)
        .then((resp) => {
          let i = resp.data;
          if (i > 0) {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.selectByName();
            this.dialogVisible = false;
          } else {
            this.msg = "修改失败，请处理";
          }
        })
        .catch((err) => {
          console.log("error=", err);
        });
    },
    tuihuishouye(){
        this.$router.push("/userIndex");
    },
    deleteUser(){
       let url = "/user/delete";
      let user = {
        tle: JSON.parse(localStorage.getItem("login_user")).tle,
      };
      let param = this.$qs.stringify(user);
      this.$confirm("确认注销账号吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(url, param)
            .then((resp) => {
              if (resp.data) {
                localStorage.removeItem("login_user");
                this.$router.push("/userIndex");
              }else{
                  this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            })
            .catch((err) => {
              console.log("error=", err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }
  },
};
</script>
<style>
.kuankuan {
  font-size: 20px;
  width: 800px;
  height: 400px;
  margin: auto;
  position: relative;
  top: 70px;
  border: 1px solid black;
  box-shadow: 10px 10px 10px #eb860a;
  background-color: rgba(231, 237, 238, 0.4);
}
.xiugai {
  position: relative;
  top: 68px;
  left: 240px;
}
.tuichu {
  float: right;
  font-size: 30px !important;
}
.zhuxiao{
  float: right;
  font-size: 30px !important;
  margin-right: 30px;
}
</style>